<template>
    <div>
        <div>
            <van-image src="/static/img/loginTop.png" />
        </div>
        <div class="input-box">
            <van-cell-group inset>
                <van-field v-model="user.mobile" type="tel" label="手机号" placeholder="填写手机号">
                    <template #button>
                        <van-button v-if="isCountDown" size="small" type="info"
                            class="white-font">({{countDownTime}})秒</van-button>
                        <van-button v-if="!isCountDown" size="small" type="info" class="white-font"
                            @click="getCode">获取验证码</van-button>
                    </template>
                </van-field>
                <van-field v-model="user.inputCode" type="number" label="验证码" placeholder="填写验证码" />
            </van-cell-group>
        </div>

        <div class="btn-box">
            <van-button style="margin-bottom: 2vh;" type="info" @click="login">登录</van-button>
            <van-button type="primary" class="white-btn" @click="wxLogin">微信登录</van-button>
        </div>
    </div>
</template>

<script>
    import { ref, reactive, onMounted } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { getToken, isMobile, isWx, log, LOCAL_USER, LOCAL_WX } from "../utils/user"
    import { getMobileCode, codeLogin, getWxId,addOrgWx } from "../api/index"
    import { wxOauth } from "../api/wx"
    import { showToast } from 'vant';


    // 1 判断是否已登录 检查token 然后跳转到home
    // 2 账号输入登录 尝试绑定微信
    // 3 微信登录  检查账号是否已注册
    export default {
        setup() {
            const router = useRouter()
            const route = useRoute()
            onMounted(() => {
                const token = getToken();
                if (token) {
                    //1 跳转到home
                    router.push("/home")
                } else {

                    let openId = route.params.id ? route.params.id : ""
                    console.log("openId", route.params)
                    if (openId) {
                        getWxId({ open_id: openId }).then(res => {
                            if (res.success) {
                                showToast('登录成功');
                                log("login", "dd");
                                localStorage.setItem(LOCAL_USER, JSON.stringify(res.data));
                                localStorage.removeItem(LOCAL_WX);
                                //2 账号登录
                                router.push("/home")
                            } else {
                                showToast(res.msg);
                            }
                        })
                    }
                }
            })
            const user = reactive({
                code: "",
                mobile: "",
                inputCode: "",
            })
            const isCountDown = ref(false)
            const countDownTime = ref(0);
            const startTime = 60;

            let randomCode = "";
            let timeId = 0;

            //获取验证码
            const getCode = () => {
                if (!user.code) {
                    showToast('请输入授权码');
                    return
                }
                if (!user.mobile) {
                    showToast('请输入手机号');
                    return
                }
                if (!isMobile(user.mobile)) {
                    showToast('请输入正确的手机号');
                    return
                }
                getMobileCode({ code: user.code, mobile: user.mobile }).then(res => {
                    log("res", res)
                    if (res.success) {
                        //授权码
                        randomCode = res.data
                        isCountDown.value = true;
                        countDownTime.value = startTime

                        showToast('验证码获取成功');

                        //倒计时
                        timeId = setInterval(() => {
                            countDownTime.value = countDownTime.value - 1;
                            if (countDownTime.value < 0) {
                                clearInterval(timeId)
                                isCountDown.value = false;
                            }
                        }, 1000)
                    }
                })

            }

            //账号登录
            const login = () => {
               
                if (!user.code) {
                    showToast('请输入授权码');
                    return
                }
                if (!user.mobile) {
                    showToast('请输入手机号');
                    return
                }
                if (!isMobile(user.mobile)) {
                    showToast('请输入正确的手机号');
                    return
                }
                if (!user.inputCode) {
                    showToast('请输入验证码');
                    return
                }
                if (user.inputCode != randomCode) {
                    showToast('请输入正确的验证码');
                    return
                }
                codeLogin({ code: user.code, mobile: user.mobile }).then(res => {
                    if (res.success) {
                        showToast('登录成功');
                        log("login", "dd");
                        localStorage.setItem(LOCAL_USER, JSON.stringify(res.data));
                        localStorage.removeItem(LOCAL_WX);
                        wxBind(res.data.uid)
                        //2 账号登录
                        // router.push("/home")
                    } else {
                        showToast(res.msg);
                    }
                })
            }

            const wxBind = (uid) => {
                if (!isWx()) {
                    router.push("/home")
                    return
                }
                let oauthData = {
                    from: "orgWebBind",
                    uid:uid
                }
                // 绑定微信信息
                wxOauth(oauthData).then(res => {
                    location.href = res.data.data.url
                })
            }
            //微信登录
            const wxLogin = () => {
                router.push("/index")
                return

                
                if (!isWx()) {
                    showToast("请使用微信浏览器打开")
                    return
                }
                let oauthData = {
                    from: "orgWebLogin"
                }
                // 获取openId
                wxOauth(oauthData).then(res => {
                    localStorage.setItem(LOCAL_WX, "ok");
                    location.href = res.data.data.url
                })
            }

            return {
                getCode,
                login,
                wxLogin,

                user,
                isCountDown,
                countDownTime
            }
        }
    }
</script>

<style scoped>
    .input-box {
        margin-top: 15vh;
    }

    .btn-box {
        margin: 4vh 5vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
</style>